<template>
  <div class="app-container">
    <el-card>
      <CategorySelect @getCategoryId="getCategoryId" :show="!show"></CategorySelect>
    </el-card>
    <el-card style="margin-top: 20px">
      <div v-show="scene == 0">
        <el-button type="primary" icon="el-icon-plus" @click="addSpu" :disabled="!categoryId3">添加SPU</el-button>
        <el-table style="width: 100%; margin-top: 10px" border :data="spuList">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width"></el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width"></el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <HintButton type="success" icon="el-icon-plus" size="mini" title="添加sku" @click="addSku(row)"></HintButton>
              <HintButton type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click="updateSpu(row)"></HintButton>
              <HintButton type="info" icon="el-icon-info" size="mini" title="查看当前spu全部sku列表" @click="showSkuList(row)"></HintButton>
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row, $index)" icon="el-icon-info" iconColor="red" width="200">
                <HintButton slot="reference" type="danger" icon="el-icon-delete" size="mini" title="删除spu"></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px; text-align: center"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getSpuList"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
      <SpuForm v-show="scene == 1" ref="spu" @changeScene="changeScene"></SpuForm>
      <SkuForm v-show="scene == 2" ref="sku" @changeScene="changeScene"></SkuForm>
    </el-card>
  </div>
</template>

<script>
import SpuForm from './SpuForm';
import SkuForm from './SkuForm';
export default {
  name: 'Spu',
  components: { SpuForm, SkuForm },
  data() {
    return {
      scene: 0, // 0代表spu列表页面，1代表spu添加页面，2代表spu修改页面
      show: true,
      categoryId1: '',
      categoryId2: '',
      categoryId3: '',
      spuList: [],
      page: 1,
      limit: 3,
      total: 0,
    };
  },
  mounted() {},
  methods: {
    getCategoryId({ categoryId, level }) {
      if (level === 1) {
        this.categoryId1 = categoryId;
        // 清楚掉二级和三级id
        this.categoryId2 = '';
        this.categoryId3 = '';
      } else if (level === 2) {
        this.categoryId2 = categoryId;
        this.categoryId3 = '';
      } else {
        this.categoryId3 = categoryId;
        // 发送请求获取平台属性数据
        this.getSpuList();
      }
    },
    async getSpuList(pages = 1) {
      this.page = pages;
      const { page, limit, categoryId3 } = this;
      let result = await this.$API.spu.reqSpuList(page, limit, categoryId3);
      if (result.code === 200) {
        this.total = result.data.total;
        this.spuList = result.data.records;
      }
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuList();
    },
    addSpu() {
      this.scene = 1;
    },
    updateSpu(row) {
      this.scene = 1;
    },
    addSku(row) {
      this.$router.push('/skuList/' + row.id);
    },
    async deleteSpu(row, index) {
      let result = await this.$API.spu.reqDeleteSpu(row.id);
      if (result.code === 200) {
        this.$message({ type: 'success', message: '删除成功' });
        this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1);
      }
    },
    showSkuList(row) {
      this.$router.push('/skuList/' + row.id);
    },
    changeScene({ scene, flag }) {
      this.scene = scene;
      if (flag === 'save') {
        this.getSpuList(this.page);
      }
      if (flag === 'cancel') {
        this.getSpuList(this.page);
      }
    },
  },
};
</script>

<style scoped></style>
